<template>
  <div>
    <a-button type="link" @click="state.popConnect = !state.popConnect"
      >联系作者</a-button
    >
    <a-button type="link" @click="state.popLogin = !state.popLogin"
      >管理入口</a-button
    >
  </div>
  <a-row :gutter="8">
    <a-col :span="12">
      <div v-if="state.popLogin">
        <a-tabs centered>
          <a-tab-pane key="1" :tab="$t('201')">
            <a-form
              :model="formLogin"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              autocomplete="off"
            >
              <a-form-item
                :label="$t('202')"
                name="username"
                :rules="[{ required: true, message: $t('203') }]"
              >
                <a-input v-model:value="formLogin.username">
                  <template #prefix>
                    <UserOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item
                :label="$t('204')"
                name="password"
                :rules="[{ required: true, message: $t('205') }]"
              >
                <a-input-password v-model:value="formLogin.password">
                  <template #prefix>
                    <LockOutlined class="site-form-item-icon" />
                  </template>
                </a-input-password>
              </a-form-item>
              <a-form-item :wrapper-col="{ span: 16, offset: 8 }">
                <a-button
                  :disabled="disabled"
                  type="primary"
                  class="login-form-button"
                  @click="onLoginClick"
                >
                  {{ $t("201") }}
                </a-button>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="2" :tab="$t('208')">
            <UserRegister></UserRegister>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div v-if="state.popConnect">
        <a-image :width="200" src="img/me_wx.jpg" />
        <a-image :width="200" src="img/me_fs.png" />
        <br />
        <span class="HelpInfo">点击图片可放大</span>
      </div>
      <a-list
        item-layout="vertical"
        :data-source="lstNews"
        header="News"
        :style="{ height: listHeight + 'px', overflow: 'auto' }"
      >
        <template #renderItem="{ item }">
          <a-list-item :key="item.key">
            <a-list-item-meta :description="item._uts"> </a-list-item-meta>
            <pre>{{ item.Content }}</pre>
            <p v-for="x in item.Pinlun" :key="x" style="margin-left: 16px">
              {{ x }}
            </p>
          </a-list-item>
        </template>
      </a-list>
    </a-col>
    <a-col :span="12">
      <a-list
        item-layout="vertical"
        :data-source="lstFaqs"
        header="Faq"
        :style="{ height: listHeight + 'px', overflow: 'auto' }"
      >
        <template #renderItem="{ item }">
          <a-list-item :key="item.key">
            <a-list-item-meta :description="item._uts"> </a-list-item-meta>
            <h4>{{ item.Q }}</h4>
            <p>
              {{ item.A }}
            </p>
          </a-list-item>
        </template>
      </a-list>
    </a-col>
  </a-row>
  <div
    style="
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    "
  >
    <a href="https://beian.miit.gov.cn">沪ICP备2025118969号-1</a>
  </div>
</template>
<script setup>
import { computed, onMounted, reactive } from "vue";
import { LockOutlined, UserOutlined } from "@ant-design/icons-vue";
import JSEncrypt from "jsencrypt";
import UserRegister from "@/login/UserRegister.vue";
import CommonDefine from "@/component/CommonDefine";
import { useRouter } from "vue-router";

const listHeight = computed(() => document.documentElement.clientHeight - 40);

const appStore = CommonDefine.appStore();
const formLogin = reactive({
  username: "",
  password: "",
  remember: true,
});
const state = reactive({
  popLogin: false,
  popChat: false,
  popConnect: false,
});
const lstNews = reactive([]);

const disabled = computed(() => {
  return !(formLogin.username && formLogin.password);
});

const router = useRouter();

const onLoginClick = () => {
  let encryptor = new JSEncrypt();
  encryptor.setPublicKey(appStore.pubKey);
  let pd = {
    usr: formLogin.username,
    pwd: encryptor.encrypt(formLogin.password),
  };
  CommonDefine.apiPostArm("/api/v1/user/login", pd, (d) => {
    localStorage.setItem("token", d.token);
    localStorage.setItem("llts", d.loginTs);
    localStorage.setItem("uid", d.uid);
    localStorage.setItem("uname", d.uname);
    localStorage.setItem("phone", d.phone);
    localStorage.setItem("urole", d.role);
    router.push("/index");
  });
};

const loadPubKey = () => {
  CommonDefine.apiGetArm("/api/v1/pub-key", (d) => {
    appStore.pubKey = d;
  });
};

const loadNews = () => {
  CommonDefine.clearArray(lstNews);
  let url = "/gateway/page/News";
  let data = {
    fields: ["Content", "Pinlun"],
    pageIndex: 1,
    lastIndex: 0,
    pageSize: 99999,
    newToOld: true,
  };
  fetch(url, {
    method: "POST",
    headers: {
      "Token-Type": "0",
      "Content-Type": "text/plain",
    },
    body: btoa(JSON.stringify(data)),
  })
    .then((res) => res.json())
    .then((arm) => {
      if (arm.ok) {
        let key = 0;
        arm.data.data.forEach((x) => {
          x.key = key;
          x.Pinlun = JSON.parse(x.Pinlun);
          lstNews.push(x);
          key++;
        });
      }
    })
    .catch((error) => {
      console.error("Error:", error);
    });
};

const lstFaqs = reactive([]);

const loadFaq = () => {
  CommonDefine.clearArray(lstFaqs);
  let url = "/gateway/page/Faq";
  let data = {
    fields: ["Q", "A"],
    pageIndex: 1,
    lastIndex: 0,
    pageSize: 99999,
    newToOld: true,
  };
  fetch(url, {
    method: "POST",
    headers: {
      "Token-Type": "0",
      "Content-Type": "text/plain",
    },
    body: btoa(JSON.stringify(data)),
  })
    .then((res) => res.json())
    .then((arm) => {
      if (arm.ok) {
        let key = 0;
        arm.data.data.forEach((x) => {
          x.key = key;
          lstFaqs.push(x);
          key++;
        });
      }
    })
    .catch((error) => {
      console.error("Error:", error);
    });
};

onMounted(() => {
  loadPubKey();
  loadNews();
  loadFaq();
});
</script>
